<!-- Demo version: 2017.08.10 -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Multi-Broadcasters and Many Viewers using RTCMultiConnection</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="shortcut icon" href="/demos/logo.png">
  <link rel="stylesheet" href="/demos/stylesheet.css">
  <script src="/demos/menu.js"></script>
</head>
<body>
  <header>
    <a class="logo" href="/demos/"><img src="/demos/logo.png" alt="RTCMultiConnection"></a>
    <a href="/demos/" class="menu-explorer">Menu<img src="/demos/menu-icon.png" alt="Menu"></a>
    <nav>
      <li>
        <a href="/demos/">Home</a>
      </li>
      <li>
        <a href="http://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
      </li>
      <li>
        <a href="http://www.rtcmulticonnection.org/FAQ/">FAQ</a>
      </li>
      <li>
        <a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection#v3-demos">Demos</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection">Github</a>
      </li>
    </nav>
  </header>

  <h1>
    Multi-Broadcasters and Many Viewers
    <p class="no-mobile">
      There are broadcasters, and there are many viewers i.e. receivers.
    </p>
  </h1>

  <section class="make-center">
    <label style="cursor: pointer;"><input type="checkbox"> Are You A Broadcaster?</label>
    <br><br>
    <input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
    <button id="open-broadcast" disabled>Open Broadcast</button>
    <button id="join-broadcast">Join Broadcast</button>

    <div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>

    <div id="videos-container"></div>
  </section>

<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/dev/adapter.js"></script>
<script src="/socket.io/socket.io.js"></script>

<!-- custom layout for HTML5 audio/video elements -->
<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
<script src="/dev/getHTMLMediaElement.js"></script>
<script>
var checkbox = document.querySelector('input[type=checkbox]');
checkbox.onchange = function() {
    if (checkbox.checked === false) {
        document.getElementById('open-broadcast').disabled = true;
    } else {
        document.getElementById('open-broadcast').disabled = false;
    }
};

function beforeJoiningARoom(callback) {
    if (checkbox.checked === false) {
        connection.extra.broadcaster = false;
        connection.dontCaptureUserMedia = true;
        connection.session.oneway = true;
    } else {
        connection.extra.broadcaster = true;
    }

    callback();
}

// ......................................................
// .......................UI Code........................
// ......................................................
document.getElementById('open-broadcast').onclick = function() {
    disableInputButtons();

    beforeJoiningARoom(function() {
        connection.openOrJoin(document.getElementById('room-id').value, function(isRoomExist, roomid) {
            showRoomURL(roomid);
            afterConnectingSocket();
        });
    });
};

document.getElementById('join-broadcast').onclick = function() {
    disableInputButtons();
    joinBroadcastLooper(document.getElementById('room-id').value);
};

// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................

var connection = new RTCMultiConnection();

// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';

// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

connection.socketMessageEvent = 'multi-broadcasters-demo';

connection.session = {
    audio: true,
    video: true,
    broadcast: true
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
    var width = parseInt(connection.videosContainer.clientWidth / 2) - 20;
    var mediaElement = getHTMLMediaElement(event.mediaElement, {
        title: event.userid,
        buttons: ['full-screen'],
        width: width,
        showOnMouseEnter: false
    });

    connection.videosContainer.appendChild(mediaElement);

    setTimeout(function() {
        mediaElement.media.play();
    }, 5000);

    mediaElement.id = event.streamid;

    if (event.type === 'remote' && connection.isInitiator) {
        var participants = [];
        connection.getAllParticipants().forEach(function(pid) {
            participants.push({
                pid: pid,
                broadcaster: connection.peers[pid].extra.broadcaster === true
            });
        });
        connection.socket.emit(connection.socketCustomEvent, {
            participants: participants
        });
    } else if (event.type === 'remote' && checkbox.checked === false) {
        connection.socket.emit(connection.socketCustomEvent, {
            giveAllParticipants: true
        });
    }
};

function afterConnectingSocket() {
    connection.socket.on(connection.socketCustomEvent, function(message) {
        console.error('custom message', message);

        if (message.participants && !connection.isInitiator) {
            message.participants.forEach(function(participant) {
                if (participant.pid === connection.userid) return;
                if (connection.getAllParticipants().indexOf(participant.pid) !== -1) return;
                if (checkbox.checked === true && participant.broadcaster === false) return;

                console.error('I am joining:', participant.pid);
                connection.join(participant.pid);
            });
        }

        if (message.giveAllParticipants && connection.isInitiator) {
            var participants = [];
            connection.getAllParticipants().forEach(function(pid) {
                participants.push({
                    pid: pid,
                    broadcaster: connection.peers[pid].extra.broadcaster === true
                });
            });
            connection.socket.emit(connection.socketCustomEvent, {
                participants: participants
            });
        }
    });
}

connection.onstreamended = function(event) {
    var mediaElement = document.getElementById(event.streamid);
    if (mediaElement) {
        mediaElement.parentNode.removeChild(mediaElement);
    }
};

function disableInputButtons() {
    document.getElementById('open-broadcast').disabled = true;
    document.getElementById('join-broadcast').disabled = true;
    document.getElementById('room-id').disabled = true;
    checkbox.disabled = true;
}

// ......................................................
// ......................Handling Room-ID................
// ......................................................

function showRoomURL(roomid) {
    var roomHashURL = '#' + roomid;
    var roomQueryStringURL = '?roomid=' + roomid;

    var html = '<h2>Unique URL for your room:</h2><br>';

    html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
    html += '<br>';
    html += 'QueryString URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';

    var roomURLsDiv = document.getElementById('room-urls');
    roomURLsDiv.innerHTML = html;

    roomURLsDiv.style.display = 'block';
}

(function() {
    var params = {},
        r = /([^&=]+)=?([^&]*)/g;

    function d(s) {
        return decodeURIComponent(s.replace(/\+/g, ' '));
    }
    var match, search = window.location.search;
    while (match = r.exec(search.substring(1)))
        params[d(match[1])] = d(match[2]);
    window.params = params;
})();

var roomid = '';
if (localStorage.getItem(connection.socketMessageEvent)) {
    roomid = localStorage.getItem(connection.socketMessageEvent);
} else {
    roomid = connection.token();
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {
    localStorage.setItem(connection.socketMessageEvent, this.value);
};

var hashString = location.hash.replace('#', '');
if (hashString.length && hashString.indexOf('comment-') == 0) {
    hashString = '';
}

var roomid = params.roomid;
if (!roomid && hashString.length) {
    roomid = hashString;
}

function joinBroadcastLooper(roomid) {
    // join-broadcast looper
    (function reCheckRoomPresence() {
        connection.checkPresence(roomid, function(isRoomExist) {
            if (isRoomExist) {
                beforeJoiningARoom(function() {
                    connection.join(roomid, function() {
                        afterConnectingSocket();
                    });
                });
                return;
            }

            setTimeout(reCheckRoomPresence, 5000);
        });
    })();

    disableInputButtons();
}

if (roomid && roomid.length) {
    document.getElementById('room-id').value = roomid;
    localStorage.setItem(connection.socketMessageEvent, roomid);
    joinBroadcastLooper(roomid);
}
</script>

  <section class="no-mobile">
    <h2>iOS or Android</h2>
    <p>
      You can write <a href="http://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="http://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well. 
    </p>
  </section>

  <footer>
    <small id="send-message"></small>
  </footer>

  <script src="https://cdn.webrtc-experiment.com/common.js"></script>
</body>
</html>
